<template>
	<view class="stop">
		<view class="s3">
			<u-button type="primary" text="列表" @click="tojilu"></u-button>
		</view>
		<view class="s1" v-for="item in list" :key="item.id" @click="todetail(item.id)">
			<text>{{item.parkName}}</text>
			<text>空位数量：{{item.vacancy}}位</text>
			<text>地址：{{item.address}}</text>
			<text>收费价格：{{item.rates}}元</text>
			<text>距离：{{item.distance}}米</text>
		</view>
		<u-button type="primary"  text="展示更多" v-show="key" @click="clickmore"></u-button>
	</view>
</template>

<script>
import list from '../../../uni_modules/uview-ui/libs/config/props/list'
	export default {
		data() {
			return {
				list:[],
				key:true,
			}
		},
		onLoad() {
			this.getstop()
		},
		methods: {
			getstop(){
				this.api.get('/prod-api/api/park/lot/list?pageNum=1&pageSize=6').then(res=>{
					this.list=res.data.rows.sort((a,b)=>a.distance-b.distance)	
				})
			},
			clickmore(){
				this.key=false
				this.api.get('/prod-api/api/park/lot/list').then(res=>{
					this.list=res.data.rows.sort((a,b)=>a.distance-b.distance)	
				})
			},
			todetail(id){
				uni.navigateTo({
					url:'/pages/serve/stop/stopdetail/stopdetail?id='+id
				})
			},
			tojilu(){
				uni.navigateTo({
					url:'/pages/serve/stop/stopjilu/stopjilu'
				})
			}
		}
	}
</script>

<style lang="scss">
	.s3{
		width: 100px;
	}
.s1{
	display: flex;
	flex-direction: column;
	width: 260px;
	margin: 20px auto;
	border: 2px solid orange;
	text-align: center;
	line-height: 28px;
	border-radius: 15px;
}
</style>
